<template>
  <el-dialog
    width="500px"
    :title="$t('m.editState')"
    :visible.sync="popupVisible"
    :before-close="close"
  >
    <!-- tool start -->
    <el-form align="center" ref="form" label-width="120px" class="mgb22">
      <el-row>
        <el-select size="mini" v-model="state">
          <el-option
            v-for="(item,index) in stateOptions"
            :key="index"
            :label="item.value"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-row>
    </el-form>
    <!-- tool end -->
    <el-row>
      <el-col :span="24">
        <el-button
          size="mini"
          type="primary"
          @click="$emit('triggerModify',state)"
        >{{$t('m.confirm')}}</el-button>
        <el-button size="mini" @click="close">{{$t('m.cancel')}}</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>
<script>
export default {
  name:'partition-modify-popup',
  props:['popupVisible'],
  data(){
    return {
      state:''
    }
  },
  methods:{
    close(){
      this.$emit('close')
    }
  },
  computed:{
    stateOptions(){
      return [{ id:0, value:this.$t('m.stop') }, { id:1, value:this.$t('m.start') }]
    }
  }
}
</script>
<style lang="scss" scoped>
.mgb22 {
  margin-bottom: 22px;
}
</style>